<template>
  <div ref="chart" style="width: 100%; height: 300px"></div>
</template>  
  
<script>
// 引入ECharts主模块
import * as echarts from "echarts";
import { getAddNumByDay } from "@/api/applicationService/data";

export default {
  name: "DoubleLineChart",
  data() {
    return {
      Xdata: [],
      Y1: [],
      Y2: [],
    };
  },

  mounted() {
    this.initData();

  },
  methods: {
    initData() {
      let that = this;
      getAddNumByDay().then((res) => {
        if (res.code == "200") {
          for (let i = 0; i < res.data.length; i++) {
            const el = res.data[i];
            that.Xdata.push(el.date);
            that.Y1.push(el.terminal?el.terminal:0);
            that.Y2.push(el.apk?el.apk:0);
          }
          //更新圖標
          this.initMap()
        }
      });
    },

    initMap(){
          // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(this.$refs.chart);

    // 指定图表的配置项和数据
    var option = {
  textStyle: {
    fontSize: 16,
    fontWeight: "1000",
    color: "#000",
  },
  title: { text: "" },
  tooltip: { trigger: "axis" },
  legend: {
    data: ["终端", "应用"],
    textStyle: { color: "#000" },
    // 可选：增加图例图标颜色同步
    itemStyle: { borderColor: "#000" } 
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true
  },
  xAxis: {
    type: "category",
    boundaryGap: false,
    data: this.Xdata
  },
  yAxis: { type: "value" },
  color: ['#5470C6', '#91CC75'], // 新增自定义颜色数组（经典蓝绿搭配）
  series: [
    {
      name: "终端",
      type: "line",
      stack: "总量",
      // areaStyle: { color: '#5470C6', opacity: 0.3 }, // 启用面积图时使用
      lineStyle: {
        width: 3,         // 加粗线条
        type: 'solid'     // 实线样式
      },
      itemStyle: {
        color: '#5470C6'  // 单独指定颜色
      },
      symbol: 'circle',    // 数据点形状
      symbolSize: 8,       // 数据点大小
      data: this.Y1
    },
    {
      name: "应用",
      type: "line",
      stack: "总量",
      // areaStyle: { color: '#91CC75', opacity: 0.3 }, // 启用面积图时使用
      lineStyle: {
        width: 3,
        type: 'dashed'    // 虚线样式
      },
      itemStyle: {
        color: '#91CC75'
      },
      symbol: 'triangle',
      symbolSize: 10,
      data: this.Y2
    }
  ]
};

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    },
  },
};
</script>  
  
<style scoped>
/* 你可以在这里添加一些CSS样式 */
</style>